﻿
<Card Title=@("基本资料") Bordered Hoverable>
    <ChildContent>
        <Form Model="@UserDetails"
              LabelColSpan="8"
              WrapperColSpan="16"
              OnFinish="FormSubmit"
                ValidateMode="@FormValidateMode.Rules" 
                ValidateOnChange="true">
            <CavFormItem FieldName="HeadPortrait" FieldRules="@context">
                <Input DebounceMilliseconds="-1"@bind-Value="context.HeadPortrait" Style="display:none;" />
                <Upload Action="@(CurrencyConstant.Api + UrlConfig.UploadHeadPortrait)"
                        Name="HeadPortrait"
                        ListType="picture-card"
                        ShowUploadList="false"
                        BeforeUpload="BeforeUpload"
                        OnSingleCompleted="OnSingleCompleted"
                        Class="avatar-uploader">
                    @if (!string.IsNullOrWhiteSpace(context.HeadPortrait))
                    {
                        <img src="@context.HeadPortrait" alt="avatar" style="width: 100%" />
                    }
                    else
                    {
                        <div>
                            <Icon Spin="loading" Type="@(loading?"Loading":"plus")"></Icon>
                            <div className="ant-upload-text">Upload</div>
                        </div>
                    }
                </Upload>
            </CavFormItem>
            <CavFormItem FieldName="AccountName" FieldRules="@context">
                <Space>
                    <SpaceItem>
                        <Input DebounceMilliseconds="-1"@bind-Value="@context.AccountName" />
                    </SpaceItem>
                </Space>
            </CavFormItem>
            <CavFormItem FieldName="Email" FieldRules="@context">
                <Space>
                    <SpaceItem>
                        <Input DebounceMilliseconds="-1"@bind-Value="@context.Email" />
                    </SpaceItem>
                    <SpaceItem>
                        <Button Disabled>发送验证码</Button>
                    </SpaceItem>
                </Space>
            </CavFormItem>
            <CavFormItem FieldName="PhoneNumber" FieldRules="@context">
                <Space>
                    <SpaceItem>
                        <Input DebounceMilliseconds="-1"@bind-Value="context.PhoneNumber" />
                    </SpaceItem>
                    <SpaceItem>
                        <Button Disabled>发送验证码</Button>
                    </SpaceItem>
                </Space>
            </CavFormItem>
            <CavFormItem FieldName="Remark" FieldRules="@context">
                <Input DebounceMilliseconds="-1"@bind-Value="context.Remark" />
            </CavFormItem>
            <FormItem WrapperColOffset="8" WrapperColSpan="16">
                <Button Type="@ButtonType.Primary" HtmlType="submit">
                    保存
                </Button>
            </FormItem>
        </Form>


    </ChildContent>
</Card>

<style>
    .avatar-uploader > .ant-upload {
        width: 128px;
        height: 128px;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
</style>
